<template>
  <div class="page-container">
    <Header></Header>

    <div class="main-container">
      <div class="content-grid">
        <!-- 左边栏 -->
        <div class="main-content">
          <div v-for="(item, index) in archives" :key="index" class="archive-card">
            <time class="archive-date">{{ item.month }}</time>
            <ol class="archive-list">
              <li v-for="(item2, index2) in item.articles" :key="index2">
                <a @click="goArticleDetail(item2.articleId)" class="article-item">
                  <img class="article-cover" :src="item2.cover" alt="文章封面"/>
                  <div class="article-info">
                    <div class="article-title">
                      <span class="title-text">{{ item2.title }}</span>
                    </div>
                    <span class="article-date">
                                        {{ item2.createTime }}
                                    </span>
                  </div>
                </a>
              </li>
            </ol>
          </div>

          <!-- 分页 -->
          <nav v-if="total > 0" class="pagination">
            <ul class="page-list">
              <li>
                <a v-if="current > 1"
                   @click="getArchiveList(current - 1)"
                   class="page-link prev">上一页</a>
                <a v-else
                   @click="getArchiveList(current)"
                   class="page-link prev disabled">上一页</a>
              </li>
              <li v-for="page in pages" :key="page">
                <a @click="getArchiveList(page)"
                   class="page-link"
                   :class="{'active': page == current}">
                  {{ page }}
                </a>
              </li>
              <li>
                <a v-if="current < pages"
                   @click="getArchiveList(current + 1)"
                   class="page-link next">下一页</a>
                <a v-else
                   @click="getArchiveList(current)"
                   class="page-link next disabled">下一页</a>
              </li>
            </ul>
          </nav>
        </div>

        <!-- 右边栏 -->
        <div class="sidebar">
          <CategoryCard></CategoryCard>
          <TagCard></TagCard>
        </div>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script setup>
import Header from '@/layouts/components/Header.vue'
import Footer from '@/layouts/components/Footer.vue'
import {useRouter} from 'vue-router'
import {getArchives} from '@/api/frontend/archive'
import {ref} from 'vue'
import TagCard from "@/components/TagCard.vue";
import CategoryCard from "@/components/CategoryCard.vue";

const router = useRouter()

const goArticleDetail = (articleId) => {
  console.log('跳转详情页' + articleId)
  router.push({path: `/article/${articleId}`})
}

const archives = ref([])
const current = ref(1)
const total = ref(0)
const size = ref(10)
const pages = ref(0)

function getArchiveList(currentPage) {
  console.log('获取分页数据')
  getArchives({current: currentPage, size: size.value})
      .then((res) => {
        console.log(res)
        if (res.success === true) {
          archives.value = res.data
          current.value = res.current
          total.value = res.total
          size.value = res.size
          pages.value = res.pages
        }
      })
}

getArchiveList(current.value)
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-container {
  flex: 1;
  max-width: 1230px;
  margin: 0 auto;
  padding: 1.25rem;
}

.content-grid {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 1.5rem;
}

.main-content {
  padding: 0 0.75rem;
}

.archive-card {
  background: white;
  border: 1px solid #e5e7eb;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.archive-date {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  display: block;
  margin-bottom: 0.75rem;
}

.archive-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.article-item {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
}

.article-item:hover {
  background-color: #f3f4f6;
}

.article-cover {
  width: 6rem;
  height: 3rem;
  border-radius: 0.5rem;
  object-fit: cover;
  margin-right: 0.75rem;
}

.article-info {
  flex: 1;
}

.article-title {
  margin-bottom: 0.25rem;
}

.title-text {
  font-weight: 500;
  color: #111827;
}

.article-date {
  font-size: 0.75rem;
  color: #6b7280;
}

.sidebar {
  padding: 0 0.75rem;
}

.pagination {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.page-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}

.page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  background: white;
  border: 1px solid #e5e7eb;
  color: #4b5563;
  cursor: pointer;
}

.page-link:hover {
  background: #f3f4f6;
  color: #1f2937;
}

.page-link.active {
  background: #dbeafe;
  color: #2563eb;
}

.page-link.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  .archive-card {
    background: #1f2937;
    border-color: #374151;
  }

  .archive-date {
    color: #f9fafb;
  }

  .title-text {
    color: #e5e7eb;
  }

  .article-date {
    color: #9ca3af;
  }

  .article-item:hover {
    background-color: #374151;
  }
}

/* 响应式布局 */
@media (max-width: 768px) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  .main-content,
  .sidebar {
    padding: 0;
  }

  .article-cover {
    width: 4rem;
    height: 2rem;
  }
}
</style>